import React, {Component} from 'react';
import {Space, Modal} from "antd";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import {
    apiGetPetSceneInfoPage,
    apiGetPetSceneClassifyList,
    apiGetPetSceneInfoDel
} from '@/request/sceneTool'

class Index extends Component {
    state = {
        columns: [
            {
                title: "ID",
                dataIndex: "sceneId",
                key: "sceneId",
                render: (text, record) => {
                    return text
                }
            },
            {
                title: "症状",
                dataIndex: "sceneName",
                key: "sceneName",
            },
            {
                title: "宠物类别",
                dataIndex: "petSpecies",
                key: "petSpecies",
                render: (text, record) => {
                    let label = ''
                    switch (text) {
                        case 1:
                            label = "猫"
                            break;
                        case 0:
                            label = "狗"
                            break;
                        // case 3:
                        //     label = "异宠"
                        //     break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },
            {
                title: "分类",
                dataIndex: "sceneClassifyName",
                key: "sceneClassifyName",
            },
            {
                title: "排序",
                dataIndex: "sorted",
                key: "sorted",
            },
            {
                title: "操作",
                fixed: "right",
                width: 200,
                render: (text, render) => {
                    return (
                        <div>
                            <TheButton haspermi={['sceneTool:symptom:edit']} onClick={() => this.goEdit(render.sceneId)}>编辑</TheButton>
                            <TheButton haspermi={['sceneTool:symptom:del']} onClick={() => this.delConfirm(render.sceneId)}>删除</TheButton>
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        searchOption: [
            {
                field: 'sceneName',
                label: '症状名称',
                placeholder: '请输入',
                required: false,
                rules: [],
                type: 'Input',
            },
            {
                field: 'petSpecies',
                label: '宠物类别',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [
                    {value: '', label: '全部'},
                    {value: 1, label: '猫'},
                    {value: 0, label: '狗'},
                ],
                initialValues: ''
            },
            {
                field: 'sceneClassifyId',
                label: '分类',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'Select',
                options: [],
                api: apiGetPetSceneClassifyList,
                params: { platformSetUseValue: 'SYMPTOM' },
                txt: 'sceneClassifyName',
                value: 'sceneClassifyId',
                // initialValues: 0
            },
        ],
        queryForm: {},
    }
    componentDidMount() {
        this.getData()
    }

    getData = async (values) => {
        let { pageNo, pageSize } = this.state.pageData
        await apiGetPetSceneInfoPage({
            pageNo,
            pageSize,
            platformSetUseValue: 'SYMPTOM',
            ...this.state.queryForm,
        }).then(res=>{
            this.setState({
                dataSource: res.data,
                pageData: {
                    pageNo: res.pageNo,
                    pageSize: res.pageSize
                },
                total: res.totalCount,
            })
        })
    }
    add = () => {
        this.props.history.push(`/sceneTool/symptom/add/null`)
    }
    goEdit = (id) => {
        this.props.history.push(`/sceneTool/symptom/add/${id}`)
    }
    delConfirm = (id) => {
        Modal.confirm({
            title: '提示',
            content: '删除该条目将在APP端无法正常显示该条内容，是否继续关闭？',
            onOk : ()=> {
                apiGetPetSceneInfoDel({sceneId:id}).then(res=>{
                    React.$message({
                        type: 'success',
                        content: '删除成功'
                    })
                    this.getData()
                })
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.queryFormRef.formRef.setFieldsValue({petSpecies:''})
            this.pageChange(1, 10)
        })
    }

    onSearch(values) {
        this.setState({
            pageData: {pageNo: 1, pageSize: 10},
            queryForm: values
        }, () => {
            this.getData()
        })
    }

    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };

    render() {
        const {columns, dataSource, pageData: {pageNo, pageSize}, total, searchOption} = this.state
        return <div className="p-layout-box">
            <TheQueryForm
                ref={(ref) => this.queryFormRef = ref}
                show={true}
                option={searchOption}
                onReset={() => this.onReset()}
                onGetValues={(fieldsValue) => this.onSearch(fieldsValue)}
            />
            <Space direction="vertical">
                <TheButton haspermi={['sceneTool:symptom:add']} type="primary" size='middle' onClick={() => this.add('add', null)}>新增</TheButton>
                <TheTable
                    columns={columns}
                    dataSource={dataSource}
                />
            </Space>
            <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange}/>
        </div>
    }
}

export default Index;
